<template>
    <div id="vue-pdf-view">
      <div class="btn">
        <van-button type="success" @click="PDFDownload">文件下载</van-button>
        <van-button type="success" @click="PDFPrint">打印</van-button>
      </div>
      <vue-pdf-embed :source="pdfState.pdfSource" ref="vuePdfRef" />
    </div>
  </template>
  
  <script setup>
  import { onMounted, reactive, ref } from "vue";
  import VuePdfEmbed from "vue-pdf-embed";
  const pdfState = reactive({
    pdfSource: {
      url: "/api/content/dam/cc/cn/legal/servicetou/Acrobat-Sign-Additional-Terms-of-Use-zh_CN-20231015.pdf",
      cMapUrl:
        "/api/content/dam/cc/cn/legal/servicetou/Acrobat-Sign-Additional-Terms-of-Use-zh_CN-20231015.pdf",
      cMapPacked: true,
    },
  });
  const vuePdfRef = ref(null);
  // -- 获取文件名（用于 文件打印和下载）--
  function getPDFFileName() {
    const last_index = pdfState.pdfSource.url.lastIndexOf("/");
    return pdfState.pdfSource.url.slice(last_index + 1);
  }
  
  // -- pdf文件下载 --
  function PDFDownload() {
    vuePdfRef.value.download(getPDFFileName());
  }
  // -- pdf文件打印 --
  function PDFPrint() {
    vuePdfRef.value.print(100, getPDFFileName(), true);
  }
  </script>
  <style>
  #vue-pdf-view {
    width: 100%;
    height: 100%;
    text-align: center;
    /* 内容溢出显示滚动条 */
    overflow: scroll;
    /* 隐藏x、y轴滚动条 */
    overflow-y: hidden;
    overflow-x: hidden;
  }
  .btn {
    display: flex;
    padding: 20px;
    justify-content: space-between;
  }
  /* 设置滚动栏的宽、高 */
  #vue-pdf-view::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  /* 设置滚动条的样式 */
  #vue-pdf-view::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #eee;
  }
  
  /* 鼠标经过滚动条变换颜色 */
  #vue-pdf-view::-webkit-scrollbar-thumb:hover {
    background-color: #cbcbff;
  }
  </style>
  